<%--
  Created by IntelliJ IDEA.
  User: 云哥
  Date: 2023/6/6
  Time: 9:33
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>文件上传</title>
</head>
<body>
<%--action:Servlet的路径--%>
<%--enctype：multipart/form-data--%>
<%--method：post--%>
<form action="uploadServlet" method="post" enctype="multipart/form-data">
   <div>
       <input type="file" onchange="preViewImg(this)" name="bookImg" required accept="image/png,image/jpeg,image/jpg">
   </div>
    <div>
        <img src="" id="bookImg" alt="请选择要上传的图片" width="180" height="200">
    </div>
    <div>
        <button type="submit">开始上传</button>
    </div>
    <div style="color: red">
        ${requestScope.msg}
    </div>
</form>
<script>
    function preViewImg(fileObj) {
        let files = fileObj.files;
        let imgUrl = window.webkitURL.createObjectURL(files[0]);
        document.getElementById('bookImg').setAttribute("src",imgUrl);
    }
</script>
</body>
</html>
